<!doctype html>
<html lang="en-us">
<head>

    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.59.1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vue | 林贤钦</title>
    <meta property="og:title" content="Vue - 林贤钦">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content="2020-04-12T16:41:59&#43;08:00">
        
        
    <meta property="article:modified_time" content="2020-04-12T16:41:59&#43;08:00">
        
    <meta name="Keywords" content="java,博客,项目管理,软件架构,公众号,小程序">
    <meta name="description" content="Vue">
        
    <meta name="author" content="林贤钦">
    <meta property="og:url" content="http://linxianqin.gitee.io/post/vue.js%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/css/normalize.css">
    
        <link rel="stylesheet" href="/css/prism.css">
    
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    


    
    
</head>

<body>
<header id="header" class="clearfix">
	<div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="http://linxianqin.gitee.io">
                        林贤钦
                    </a>
                
                <p class="description">专注于Java、微信小程序、移动互联网、项目管理、软件架构</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="http://linxianqin.gitee.io">首页</a>
                    
                    <a  href="http://linxianqin.gitee.io/archives/" title="归档">归档</a>
                    
                    <a  href="http://linxianqin.gitee.io/about/" title="关于">关于</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
        
        
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">
                    <article class="post">
                        <header>
                            <h1 class="post-title">Vue</h1>
                        </header>
                        <date class="post-meta meta-date">
                            2020年4月12日
                        </date>
                        
                        <div class="post-meta">
                            <span>|</span>
                            
                                <span class="meta-category"><a href="http://linxianqin.gitee.io/categories/vue">vue</a></span>
                            
                        </div>
                        
                        
                        <div class="post-meta">
                            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span> 阅读</span></span>
                        </div>
                        
                        
                        <div class="post-content">
							<nav id="TableOfContents">
<ul>
<li><a href="#一-介绍">一、介绍</a></li>
<li><a href="#二-基本语法">二、基本语法</a>
<ul>
<li><a href="#1-基本数据渲染和指令">1、基本数据渲染和指令</a></li>
<li><a href="#2-双向数据绑定">2、双向数据绑定</a></li>
<li><a href="#3-事件">3、事件</a></li>
<li><a href="#4-修饰符">4、修饰符</a></li>
<li><a href="#5-条件渲染">5、条件渲染</a></li>
<li><a href="#6-列表渲染">6、列表渲染</a></li>
</ul></li>
</ul>
</nav>
                            

<h1 id="一-介绍">一、介绍</h1>

<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。</p>

<p>Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>

<p>官方网站：<a href="https://cn.vuejs.org">https://cn.vuejs.org</a></p>

<h1 id="二-基本语法">二、基本语法</h1>

<h2 id="1-基本数据渲染和指令">1、基本数据渲染和指令</h2>

<p>创建 01-基本数据渲染和指令.html</p>

<p>你看到的 v-bind 特性被称为指令。指令带有前缀 v-</p>

<p>除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）</p>

<pre><code class="language-html">data: {
    content: '我是标题',
    message: '页面加载于 ' + new Date().toLocaleString()
}
</code></pre>

<pre><code class="language-html">
&lt;!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
     此时title中显示的是模型数据
--&gt;
&lt;h1 v-bind:title=&quot;message&quot;&gt;
    {{content}}
&lt;/h1&gt;
&lt;!-- v-bind 指令的简写形式： 冒号（:） --&gt;
&lt;h1 :title=&quot;message&quot;&gt;
    {{content}}
&lt;/h1&gt;
</code></pre>

<h2 id="2-双向数据绑定">2、双向数据绑定</h2>

<p>创建 02-双向数据绑定.html</p>

<p>双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定</p>

<pre><code class="language-html">
data: {
    searchMap:{
        keyWord: '双向数据绑定'
    }
}
</code></pre>

<pre><code class="language-HTML">&lt;!-- v-bind:value只能进行单向的数据渲染 --&gt;
&lt;input type=&quot;text&quot; v-bind:value=&quot;searchMap.keyWord&quot;&gt;
&lt;!-- v-model 可以进行双向的数据绑定  --&gt;
&lt;input type=&quot;text&quot; v-model=&quot;searchMap.keyWord&quot;&gt;
&lt;p&gt;您要查询的是：{{searchMap.keyWord}}&lt;/p&gt;
</code></pre>

<p>在v-model的input里输入的时候，单向的v-bind也会得到数据并展示，而在在v-bind的input里输入的时候，单向的v-model不会得到数据并展示</p>

<h2 id="3-事件">3、事件</h2>

<p>创建 03-事件.html</p>

<p><strong>需求：</strong>点击查询按钮，按照输入框中输入的内容查找相关信息</p>

<p>在前面的例子基础上，data节点中增加 result，增加 methods节点 并定义 search方法</p>

<pre><code>data: {
     searchMap:{
         keyWord: '事件'
     },
     //查询结果
     result: {}
},
methods:{
    search(){
        console.log('search')
        //TODO
    }
}
</code></pre>

<p>html中增加 button 和 p</p>

<p>使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中</p>

<pre><code class="language-html">&lt;!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 --&gt;
&lt;button v-on:click=&quot;search()&quot;&gt;查询&lt;/button&gt;
&lt;p&gt;您要查询的是：{{searchMap.keyWord}}&lt;/p&gt;
&lt;p&gt;&lt;a v-bind:href=&quot;result.site&quot; target=&quot;_blank&quot;&gt;{{result.title}}&lt;/a&gt;&lt;/p&gt;
</code></pre>

<p>完善search方法</p>

<pre><code class="language-html">search(){
    console.log('search');
    this.result = {
        &quot;title&quot;:&quot;完善search方法&quot;,
        &quot;site&quot;:&quot;http://www.linxianqin.com&quot;
    }
}
</code></pre>

<p>简写</p>

<pre><code>&lt;!-- v-on 指令的简写形式 @ --&gt;
</code></pre>

<pre><code>&lt;button @click=&quot;search()&quot;&gt;查询&lt;/button&gt;
</code></pre>

<h2 id="4-修饰符">4、修饰符</h2>

<p>创建 04-修饰符.html</p>

<p>修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。</p>

<p>例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：</p>

<p>即阻止事件原本的默认行为</p>

<pre><code class="language-html">data: {
    user: {}
}
</code></pre>

<pre><code class="language-html">&lt;!-- 修饰符用于指出一个指令应该以特殊方式绑定。
     这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
     即阻止表单提交的默认行为 --&gt;
&lt;form action=&quot;save&quot; v-on:submit.prevent=&quot;onSubmit&quot;&gt;
    &lt;label for=&quot;username&quot;&gt;
        &lt;input type=&quot;text&quot; id=&quot;username&quot; v-model=&quot;user.username&quot;&gt;
        &lt;button type=&quot;submit&quot;&gt;保存&lt;/button&gt;
    &lt;/label&gt;
&lt;/form&gt;
</code></pre>

<pre><code class="language-vue">methods: {
    onSubmit() {
        if (this.user.username) {
           console.log('提交表单')
        } else {
           alert('请输入用户名')
        }
    }
}
</code></pre>

<h2 id="5-条件渲染">5、条件渲染</h2>

<p>创建 05-条件渲染.html</p>

<p>v-if：条件指令</p>

<pre><code class="language-vue">data: {
    ok: false
}
</code></pre>

<pre><code class="language-vue">&lt;input type=&quot;checkbox&quot; v-model=&quot;ok&quot;&gt;同意许可协议
&lt;!-- v:if条件指令：还有v-else、v-else-if 切换开销大 --&gt;
&lt;h1 v-if=&quot;ok&quot;&gt;if：Lorem ipsum dolor sit amet.&lt;/h1&gt;
&lt;h1 v-else&gt;no&lt;/h1&gt;
</code></pre>

<p>v-show：条件指令</p>

<p>使用v-show完成和上面相同的功能</p>

<pre><code class="language-vue">&lt;!-- v:show 条件指令 初始渲染开销大 --&gt;
&lt;h1 v-show=&quot;ok&quot;&gt;show：Lorem ipsum dolor sit amet.&lt;/h1&gt;
&lt;h1 v-show=&quot;!ok&quot;&gt;no&lt;/h1&gt;
</code></pre>

<ul>
<li><code>v-if</code> 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</li>
<li><code>v-if</code> 也是<strong>惰性的</strong>：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</li>
<li>相比之下，<code>v-show</code> 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</li>
<li>一般来说，<code>v-if</code> 有更高的切换开销，而 <code>v-show</code> 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 <code>v-show</code> 较好；如果在运行时条件很少改变，则使用 <code>v-if</code> 较好。</li>
</ul>

<h2 id="6-列表渲染">6、列表渲染</h2>

<p>创建 06-列表渲染.html</p>

<p>v-for：列表循环指令</p>

<p><strong>例1：简单的列表渲染</strong></p>

<pre><code class="language-vue">&lt;!-- 1、简单的列表渲染 --&gt;
&lt;ul&gt;
    &lt;li v-for=&quot;n in 10&quot;&gt;{{ n }} &lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
    &lt;!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 --&gt;
    &lt;li v-for=&quot;(n, index) in 5&quot;&gt;{{ n }} - {{ index }} &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>例2：遍历数据列表</strong></p>

<pre><code class="language-vue">data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}
</code></pre>

<pre><code class="language-vue">&lt;!-- 2、遍历数据列表 --&gt;
&lt;table border=&quot;1&quot;&gt;
    &lt;!-- &lt;tr v-for=&quot;item in userList&quot;&gt;&lt;/tr&gt; --&gt;
    &lt;tr v-for=&quot;(item, index) in userList&quot;&gt;
        &lt;td&gt;{{index}}&lt;/td&gt;
        &lt;td&gt;{{item.id}}&lt;/td&gt;
        &lt;td&gt;{{item.username}}&lt;/td&gt;
        &lt;td&gt;{{item.age}}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

                        </div>
						 
                        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="http://linxianqin.gitee.io">林贤钦</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="http://linxianqin.gitee.io/post/vue.js%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/">http://linxianqin.gitee.io/post/vue.js%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://linxianqin.gitee.io">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



                        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/post/ES6%E5%85%A5%E9%97%A8/">ES6入门</a></li>
        
        <li><a href="/post/%E7%94%B5%E5%95%86%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0-API-%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/">电商管理后台 API 接口文档</a></li>
        
        <li><a href="/post/ssm&#43;vue%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E5%AE%9E%E4%BE%8B/">ssm&#43;vue跨域解决实例</a></li>
        
        <li><a href="/post/%E6%B5%85%E8%B0%88springboot-Security-Jwt-%E5%AE%9E%E7%8E%B0token/">springBoot&#43;Security&#43;JWT&#43;Jpa&#43;Vue实现登录权限控制</a></li>
        
        <li><a href="/post/springSecurity%E7%9A%84session%E7%AE%A1%E7%90%86%E5%8F%8A%E5%AE%89%E5%85%A8%E9%85%8D%E7%BD%AE/">SpringSecurity的session管理及安全配置</a></li>
        
    </ul>
</div>


                        <div class="post-meta meta-tags">
                            
                            <ul class="clearfix">
                                
                                <li><a href="http://linxianqin.gitee.io/tags/vue">vue</a></li>
                                
                            </ul>
                            
                        </div>
                    </article>
                    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "757610938/hugo-blogs-utterances"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
                </div>
            </div>
            <div id="secondary">
    <section class="widget">
        <form id="search" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="http://linxianqin.gitee.io">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="http://linxianqin.gitee.io/post/java-%E5%8F%8D%E5%B0%84/" title="Java 反射">Java 反射</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/java-%E9%93%BE%E8%A1%A8/" title="Java 链表">Java 链表</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/%E7%9F%AD%E4%BF%A1%E6%B3%A8%E5%86%8C%E5%92%8C%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95%E7%9A%84%E5%AE%9E%E7%8E%B0/" title="短信注册和微信登录的实现">短信注册和微信登录的实现</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/OAuth2.0%E8%AE%A4%E8%AF%81%E6%8E%88%E6%9D%83%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" title="OAuth2.0认证授权单点登录">OAuth2.0认证授权单点登录</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/Nacos%E6%9C%8D%E5%8A%A1%E6%B3%A8%E5%86%8C%E4%B8%AD%E5%BF%83/" title="Nacos服务注册中心">Nacos服务注册中心</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/SpringCloud%E5%BE%AE%E6%9C%8D%E5%8A%A1/" title="SpringCloud微服务">SpringCloud微服务</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/%E9%98%BF%E9%87%8C%E4%BA%91%E8%A7%86%E9%A2%91%E7%82%B9%E6%92%AD%E6%9C%8D%E5%8A%A1/" title="阿里云视频点播服务前后端实现">阿里云视频点播服务前后端实现</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/%E9%98%9F%E5%88%97/" title="队列">队列</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/%E7%A8%80%E7%96%8F%E6%95%B0%E7%BB%84/" title="稀疏数组">稀疏数组</a>
    </li>
    
    <li>
        <a href="http://linxianqin.gitee.io/post/%E9%98%BF%E9%87%8C%E4%BA%91EasyExcel%E5%AE%9E%E7%8E%B0%E5%90%8E%E7%AB%AF%E5%AF%B9Excel%E7%9A%84%E8%AF%BB%E5%86%99%E6%93%8D%E4%BD%9C/" title="使用阿里云EasyExcel实现后端对Excel的读写操作">使用阿里云EasyExcel实现后端对Excel的读写操作</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li><a href="http://linxianqin.gitee.io/categories/JWT/">JWT (2)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/hugo/">hugo (2)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/java/">java (18)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/java8/">java8 (1)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/springCloud/">springCloud (2)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/springSecurity/">springSecurity (4)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/vue/">vue (5)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/yml/">yml (1)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构 (3)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/">软件测试 (1)</a></li>
    
    <li><a href="http://linxianqin.gitee.io/categories/%E9%98%BF%E9%87%8C%E4%BA%91/">阿里云 (4)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="http://linxianqin.gitee.io/tags/JWT/">JWT</a>
    
    <a href="http://linxianqin.gitee.io/tags/hugo/">hugo</a>
    
    <a href="http://linxianqin.gitee.io/tags/java/">java</a>
    
    <a href="http://linxianqin.gitee.io/tags/java8/">java8</a>
    
    <a href="http://linxianqin.gitee.io/tags/spring/">spring</a>
    
    <a href="http://linxianqin.gitee.io/tags/springBoot/">springBoot</a>
    
    <a href="http://linxianqin.gitee.io/tags/springCloud/">springCloud</a>
    
    <a href="http://linxianqin.gitee.io/tags/ssm/">ssm</a>
    
    <a href="http://linxianqin.gitee.io/tags/vue/">vue</a>
    
    <a href="http://linxianqin.gitee.io/tags/yml/">yml</a>
    
    <a href="http://linxianqin.gitee.io/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a>
    
    <a href="http://linxianqin.gitee.io/tags/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/">软件测试</a>
    
    <a href="http://linxianqin.gitee.io/tags/%E9%98%BF%E9%87%8C%E4%BA%91/">阿里云</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://www.cnki.net" title="中国知网">中国知网</a>
        </li>
        
        <li>
            <a target="_blank" href="https://linxianqin.com" title="个人的另一个博客网站(国内加载慢)">个人的另一个博客网站(国内加载慢)</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="http://linxianqin.gitee.io/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        &copy; 2020 <a href="http://linxianqin.gitee.io">林贤钦 By 林贤钦</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="https://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/rujews/maupassant-hugo" target="_blank">maupassant</a>.
        
    </div>
</footer>


    
    <script type="text/javascript">
        
        (function () {
            $("pre code").parent().addClass("line-numbers")
        }());

        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script type="text/javascript" src="/js/prism.js" async="true"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>


<a id="rocket" href="#top"></a>
<script type="text/javascript" src="/js/totop.js?v=0.0.0" async=""></script>

<script type="application/javascript">
var doNotTrack = false;
if (!doNotTrack) {
	window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
	ga('create', 'GA ID', 'auto');
	
	ga('send', 'pageview');
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>



    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




</body>
</html>
